<template>
	<view>
		<!-- <cu-custom bgColor="text-156" :isBack="true">
			<block slot="content">打卡</block>
		</cu-custom> -->
		<uni-nav-bar :fixed="true" left-icon="back" color="#156DAC" @clickLeft="pageback">
			<view class="header-icon-text-panel">
				<text class="title">打卡</text>
			</view>
		</uni-nav-bar>
		<view>
			<uni-forms class="right-form" :value="formData" ref="form" :rules="rules" errShowType="toast">
				<view class="form-content" style="margin: 50upx auto;padding-top: 30upx;">
					<uni-forms-item required label="打卡目的" name="objective">
						<lb-picker v-model="formData.objective" :list="objectiveList" :props="pickerProps">
							<view class="lb-picker-placeholder-panel" style="text-align: right;">
								<text v-if="formData.objective" style="border: 0;" class="lb-picker-text">{{formData.objective}}</text>
								<text v-else class="lb-picker-placeholder" style="border: 0;">请选择打卡目的</text>
								<uni-icons class="icon" type="forward" size="20" color="#999"></uni-icons>
							</view>
						</lb-picker>
					</uni-forms-item>
					<uni-forms-item required label="企业" name="enterpriseId" >
						<lb-picker v-model="formData.enterpriseId" :list="companyListBak" :props="pickerProps"  @confirm="(e)=>pickerSelectConfim('enterprise',e)">
							<view slot="header-top">
								<view style="padding: 10upx;">
									<uni-easyinput type="text" v-model="searchText" placeholder="请输入关键字" prefixIcon="search" @input="search" />
								</view>
							</view>
							<view class="lb-picker-placeholder-panel" style="text-align: right;line-height: 1.2;">
								<text v-if="formData.enterpriseId" style="border: 0;" class="lb-picker-text">{{formData.enterpriseName}}</text>
								<text v-else class="lb-picker-placeholder" style="border: 0;">请选择企业</text>
								<uni-icons class="icon" type="forward" size="20" color="#999"></uni-icons>
							</view>
						</lb-picker>
					</uni-forms-item>
					<uni-forms-item required label="备注" name="remark">
						<uni-easyinput class="form-ipt" type="text" v-model="formData.remark" placeholder="请输入备注" />
					</uni-forms-item>
				</view>
				<button class="form-btn" @click="submitForm">确认</button>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker'
	
	const addressUrl = '/business/maintenance/selectFormTempByCd'
	const companyUrl = '/base/enterprise/list' // get
	const clockUrl = '/system/clock'
	var position =''
	export default {
		components:{
			LbPicker
		},
		data() {
			return {
				rules: {
					objective: {
						rules: [
							{ required: true, errorMessage: '请输入打卡目的'},
						]
					},
					enterpriseId: {
						rules: [
							{ required: true, errorMessage: '请选择企业'},
						]
					},
					
				},
				cIndex: null,
				companyIndex: null,
				formData:{
					engineerId: -1,
					enterpriseId: '',
					enterpriseName: '',
					type: 'e062_01',
					objective: '',
					remark: '',
					position: ''
				},
				searchText:'',
				companyListBak:[],
				contentList: [
					{id: 0,label: '监测'},{id: 1,label: '上班'},{id: 2,label: '下班'},
				],
				companyList: [
					{id: 0,label: '公司1'},{id: 1,label: '公司2'},{id: 2,label: '公司3'},
				],
				objectiveList: [
					'巡检','标定', '校准','故障维修', '其他'
				],
				addressList: [],
				pickerProps: {
					label: 'name',
					value: 'id',
				},
			}
		},
		onLoad() {
			this.initData()
			// 获取经纬度
			this.formData.position = ''
			uni.authorize && uni.authorize({
				scope: 'scope.userLocation',
				success() {
					uni.getLocation({
						type: 'gcj02', //返回可以用于uni.openLocation的经纬度
						success: function(res) {
							const latitude = res.latitude;
							const longitude = res.longitude;
							console.log('当前位置的经度：' + longitude);
							console.log('当前位置的纬度：' + latitude);
							position =  longitude+','+latitude
						}
					});
				}
			})
		},
		methods: {
			pageback(){
				uni.navigateBack({
					delta: 1
				});
			},
			search(){
				const newList = this.companyList.filter(item=>item.name.indexOf(this.searchText) !== -1)
				this.companyListBak = newList
			},
			pickerSelectConfim(key,e){
				const {item} = e
				const {id, name} = item
				this.formData[key+ 'Id'] = id
				this.formData[key+'Name'] = name
			},
			initData(){
				// this.$api.request(addressUrl,{
				// 	method: 'get',
				// }).then(res=>{
				// 	console.log('address')
				// 	console.log(res)
				// 	if(res.success){
						
				// 	}
				// })
				this.$api.request(companyUrl,{
					method: 'get',
				}).then(res=>{
					// console.log(res)
					if(res.success){
						this.companyList = res.data.list
						this.companyListBak.push(...res.data.list)
					}
				})
			},
			submitForm(){
				this.formData.position = position
				this.$refs.form.submit().then((res)=>{
					console.log('表单返回得值：', res)
					console.log('表单：', this.formData)
					// this.$api.toastMsg('提交成功')
					uni.showLoading({
						title:'提交中',mask: true
					})
					this.$api.request(clockUrl,{
						method: 'post',
						data: this.formData
					}).then(res=>{
						console.log(res)
						uni.hideLoading()
						if(res.success){
							this.$api.toastMsg('打卡成功')
							setTimeout(()=>{
								this.pageback()
							},1000)
						}else{
							const msg = res.message || '网络异常,请稍后再试'
							this.$api.toastMsg(msg)
						}
					}).catch(()=>{
						uni.hideLoading()
					})
				}).catch(err=>{
					console.log(err)
				})
			},
			bindCompanyChange(e){
				const item = this.contentList[e.detail.value]
				this.companyIndex = e.detail.value
				// this.formData.cid = item.id
				this.formData.companyId = item.id
				this.formData.companyName = item.label
			},
			bindPickerChange(e){
				const item = this.contentList[e.detail.value]
				this.cIndex = e.detail.value
				this.formData.cid = item.id
				this.formData.cLabel = item.label
			}
		}
	}
</script>

<style lang="scss">
	
</style>
